<!--
 * @Description: 汽车列表
 * @Author: xiao li
 * @Date: 2021-12-01 16:32:16
 * @LastEditTime: 2021-12-24 11:03:33
 * @LastEditors: xiao li
-->
<template>
  <div>
    <div class="pl-lg pt-lg fill-base f-caption c-caption">共找到3辆好车</div>
    <div
      class="list-item fill-base flex-center pb-lg pl-lg pr-lg"
      :class="[{ 'pt-lg': index == 0 }]"
      v-for="(item, index) in 3"
      :key="index"
    >
      <img class="avatar radius-25" :src="image" />
      <div class="flex-1 ml-lg max-400">
        <div class="title f-paragraph text-bold ellipsis-2">
          宝马(进口)-宝马8系双门
        </div>
        <div class="f-paragraph text-bold ellipsis">2021款 840i 双门轿跑车</div>
        <div class="f-caption c-title" style="min-height: 18px">
          <block v-if="index === 0">2021年1月 ｜ 12万公里 ｜ 成都市 </block>
        </div>
        <div class="flex-y-center f-icontext c-caption">
          <div class="flex-y-center c-warning">
            <div class="price">96.2</div>
            <div class="ml-sm mr-sm">万</div>
          </div>
          <div class="flex-y-center">
            新车:
            <div class="text-delete">109.2万</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'carSearch',
  props: {
    o: Object
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.avatar {
  width: 127px;
  height: 131px;
}

.title {
  height: 42px;
  line-height: 21px;
}

.price {
  font-size: 18px;
  line-height: 22px;
}
</style>
